import {
  ProForm,
  ProFormCheckbox,
  ProFormRadio,
  ProFormText,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page2: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>选项表单页面</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormText
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          rules={[{ required: true, message: "请输入姓名" }]}
        />

        <ProFormRadio.Group
          name="gender"
          label="性别"
          options={[
            { label: "男", value: "male" },
            { label: "女", value: "female" },
            { label: "其他", value: "other" },
          ]}
          rules={[{ required: true, message: "请选择性别" }]}
        />

        <ProFormCheckbox.Group
          name="hobbies"
          label="兴趣爱好"
          options={[
            { label: "阅读", value: "reading" },
            { label: "运动", value: "sports" },
            { label: "音乐", value: "music" },
            { label: "旅行", value: "travel" },
            { label: "烹饪", value: "cooking" },
          ]}
        />

        <ProFormCheckbox
          name="agreement"
          label="我已阅读并同意用户协议"
          rules={[
            {
              validator: (_, value) =>
                value
                  ? Promise.resolve()
                  : Promise.reject(new Error("请同意用户协议")),
            },
          ]}
        />
      </ProForm>
    </div>
  );
};

export default Page2;
